<template>
  <div class="main">
    <Header></Header>
    <el-card class="card">
      <div class="title">
        <a href="" class="titlefirst">上传作品</a>
        <a href="" class="titlesecond">上传文章</a>
      </div>
      <div class="clear"></div>
      <div class="formContent">
        <el-form :label-position="labelPosition" label-width="80px" size="medium" :model="form">
          <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
            <span class="spantext">*标题字符不能超过60个字符</span>
          </el-form-item>
          <el-form-item label="特殊资源">
            <el-radio-group v-model="form.resource">
              <el-radio label="线上品牌商赞助"></el-radio>
              <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
            <span class="spantext">* 原创作品版权归上传者所有，禁止匿名转载；禁止商业使用；禁止个人使用</span>
          </el-form-item>
          <el-form-item label="阅读权限">
            <el-radio-group v-model="form.right">
              <el-radio label="所有人可见"></el-radio>
              <el-radio label="注册会员可见"></el-radio>
              <el-radio label="收费可见"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="评论权限">
            禁止评论
            <el-switch v-model="form.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="作品分类">
            <el-button>默认按钮</el-button>
            <el-button>默认按钮</el-button>
            <el-button>默认按钮</el-button>
          </el-form-item>
          <el-form-item label="自定分类">
            <el-select v-model="form.sort" placeholder="请选择自定义分类">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="z作品简介">
            <el-input type="textarea" v-model="form.desc"></el-input>
             <span class="spantext">填写5-200个文字</span>
          </el-form-item>
         
        </el-form>
      </div>
    </el-card>

  </div>
</template>

<script>
import Header from "@/component/head.vue"
export default {
  data() {
    return {
      form: {
        name: "",
        resource: "",
        right: "",
        delivery: false,
        type: [],
        sort: "",
        desc: "",
      },
      labelPosition: 'right',
    }
  },
  components: {
    Header,
  },
  methods: {

  },
}
</script>

<style scoped>
/* .main{
    height: 100%;
    width: 100%;
    background-color: rgb(233, 233, 233);
}
html{
    height: 100%;
    width: 100%;
    background-color: rgb(233, 233, 233);
} */
/* body{
    background: rgb(233, 233, 233);
} */
/* body {
    font: normal 14px/1.7 '微软雅黑';
    background: #e9e9e9;
    color: #666;
    height: 100%;
    margin: 0;
    overflow-y: scroll;
    visibility: visible;
} */
a {
  text-decoration: none;
}
.card {
  width: 1200px;
  margin: 50px auto;
  text-align: left;
}
.title {
  padding: 20px 30px;
  font-size: 24px;
  float: left;
  height: 31px;
  line-height: 31px;
}
.title > a {
  display: inline-block;
  padding-right: 15px;
  cursor: pointer;
  font-size: 18px;
  font: "微软雅黑";
  color: #333333;
}
.titlefirst {
  border-right: #00a0e9 2px solid;
  padding-right: 20px;
}
.titlesecond {
  padding-left: 15px;
}
.title > a:hover {
  color: rgb(255, 177, 33);
}
.clear {
  clear: both;
}
.spantext {
  color: #f43700;
  font-size: 12px;
  display: flex;
  justify-content: left;
}
.formContent {
  width: 1200;
  padding: 10px 50px;
  border-top: 3px solid rgb(255, 165, 0);
  margin: 0 0 30px;
  font-size: 20px;
  display: flex;
  justify-content: left;
}
</style>